
<template>
  <!-- 帖子类别页面 -->
  <div class="app-container">
    <!-- 其他操作 -->
    <section class="filter-container">
      <el-row>
        <el-button type="primary" size="small" @click="openForm('add')">添加类别</el-button>
      </el-row>
    </section>
    <!-- 表格数据 -->
    <el-table
      :data="tableList"
      v-loading="loading"
      element-loading-text="正在查询中。。。"
      stripe
      highlight-current-row
    >
      <el-table-column type="index" align="center" width="50"></el-table-column>
      <el-table-column prop="articletype_name" align="center" label="类别名称"></el-table-column>
      <el-table-column align="center" label="列表链接">
        <template slot-scope="scope">
          <el-button
            v-clipboard:copy="'https://cloud.anyolife.com/topicType' + '?id=' + scope.row.id + 
                    '&name=' + scope.row.articletype_name"
            v-clipboard:success="onCopy"
            v-clipboard:error="onError"
            type="text"
          >复制链接</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <i class="iconfont ali-edit-2" @click="openForm('edit', scope.row)"></i>
          &nbsp;
          <i class="iconfont ali-bin" @click="delRow(scope.row)"></i>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <section>
      <so-pagination :query="listQuery" @initList="initList"/>
    </section>
    <!-- 添加编辑类别模态框 -->
    <section>
      <el-dialog width="600px" :title="dialog.state=='add'?'添加类别':'编辑类别'" :visible.sync="dialog.show">
        <div>
          <el-form ref="form" :model="form" label-width="135px">
            <el-form-item label="名称" prop="articletype_name" :rules="filter_rules({required:true})">
              <el-input
                v-model.trim="form.articletype_name"
                style="width: 390px"
                placeholder="请输入类别名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="封面" prop="file_path" :rules="filter_rules({type: 'upload'})">
              <el-upload action="/api/backstage/fileUpload" class="avatar-uploader" 
                name="file_path" :before-upload="beforeAvatarUpload" 
                :on-success='handleSuccess' :show-file-list="false">
                <img v-if="form.file_path" :src="form.file_path" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog.show = false">取 消</el-button>
          <el-button type="primary" @click="validate">确 定</el-button>
        </span>
      </el-dialog>
    </section>
  </div>
</template>
<script>
import SoPagination from "@/components/SoPagination";
import {
  articletype_save,
  articletype_edit,
  articletype_list,
  articletype_delete
} from "@/api/articleType";

export default {
  name: "integralClass",
  components: { SoPagination },
  data() {
    return {
      loading: false,
      tableList: [],
      ossPublicUrl: localStorage.getItem("ossPublicUrl"),
      listQuery: { start: 0, limit: 10, total: 0, current: 1 },
      dialog: { show: false, state: "" },
      form: {articletype_name:"",file_path:""}
    };
  },
  methods: {
    onCopy: function() {
      this.$message({
        type: "success",
        message: "复制成功"
      });
    },
    onError: function() {
      this.$message.error("复制失败");
    },
    openForm(state, e) {
      this.dialog = { state: state, show: true };
      this.form = e != null ? e : {};
    },
    async delRow(row) {
      try {
        let res = await this.$confirm("确认删除吗？");
        if (res == "confirm") {
          this.loading = true;
          let { data } = await articletype_delete(row);
          this.loading = false;
          if (data.status == 100) {
            this.$message.success("删除成功");
            this.initList();
          }
        }
      } catch (error) {
        console.log(error, "error");
      }
    },
    async saveObj() {
      this.loading = true;
      const parms = {
        ...this.form,
        company_id: localStorage.getItem("companyId") - 0
      };
      const { data } = await articletype_save(parms);
      if (data.status == 100) {
        this.$message.success("添加成功");
      }
      this.loading = false;
      this.initList();
    },
    async editObj() {
      this.loading = true;
      const parms = { ...this.form };
      const { data } = await articletype_edit(parms);
      if (data.status == 100) {
        this.$message.success("编辑成功");
      }
      this.loading = false;
      this.initList();
    },
    beforeAvatarUpload(file){
        let name = file.name.split('.');
        if(name[name.length - 1] === 'jpg'||name[name.length - 1] === 'jpeg'||name[name.length - 1] === 'png'){
            return file
        }else {
            this.$message.error('图片只能是 jpeg/png 格式!')
            return false
        }
    },
    handleSuccess(res,file,fileList){
        if(res.status == 100){
            this.form.file_path = this.ossPublicUrl + '/' + res.data.file_path
        }
    },
    validate() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.dialog.show = false;
          this.dialog.state == "add" ? this.saveObj() : this.editObj();
        } else {
          return false;
        }
      });
    },
    async initList() {
      this.loading = true;
      const query = {
        ...this.listQuery,
        company_id: localStorage.getItem("companyId") - 0
      };
      const { data } = await articletype_list(query);
      this.loading = false;
      if (data.status == 100) {
        this.tableList = data.data.rows;
        this.listQuery.total = data.data.results;
      }
    }
  },
  created() {
    this.initList();
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
$border: 1px dashed #d9d9d9;
$picture-size: 120px;
.ali-edit-2 {
  cursor: pointer;
  color: #e6a23d;
}

.ali-bin {
  cursor: pointer;
  color: #f56c6c;
}

.form-text {
  padding: 10px;
  border-radius: 3px;
}
.avatar-uploader {
    .el-upload {
        border: $border;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        &:hover {
            border-color: #409EFF;
        }
    }
}
.avatar-uploader-icon {
    border: $border;
    font-size: 28px;
    color: #8c939d;
    width: $picture-size;
    height: $picture-size;
    line-height: $picture-size;
    text-align: center;
    border-radius: 5px;
}
.avatar {
    width: 92%;
    display: block;
    border-radius: 5px;
}
</style>


